<template>
	<view class="job">
		<view class="flex alignCenter justConBetween jobItem" @click="chooseYear('start')">
			<view class="font14 flex alignCenter"><text class="colorRed">*</text><text>工作开始年份</text></view>
			<view class="flex font14 alignCenter justConEnd">
				<view class="">{{startYear}}</view>
				<uni-icons type="right" size="18"></uni-icons>
			</view>
		</view>
		<view class="flex alignCenter justConBetween jobItem" @click="chooseYear('end')">
			<view class="font14 flex alignCenter title"><text class="colorRed">*</text><text>工作结束年份</text></view>
			<view class="flex font14 alignCenter justConEnd">
				<view class="">{{endYear}}</view>
				<uni-icons type="right" size="18"></uni-icons>
			</view>
		</view>
		<view class="flex alignCenter justConBetween jobItem">
			<view class="font14 flex alignCenter title"><text class="colorRed">*</text><text>公司名称</text></view>
			<view class="flex font14 alignCenter justConEnd">
				<input class="font14" maxlength="30" v-model.trim="companyName" type="text" placeholder-class="font14" placeholder="请输入(30字符内)">
			</view>
		</view>
		<view class="flex alignCenter justConBetween jobItem">
			<view class="font14 flex alignCenter title"><text class="colorRed">*</text><text>从事职位</text></view>
			<view class="flex font14 alignCenter justConEnd">
				<input class="font14" maxlength="10" v-model.trim="jobTitle" type="text" placeholder-class="font14" placeholder="请输入(10字符内)">
			</view>
		</view>
		<view class="jobItem">
			<view class="font14 flex alignCenter title"><text class="colorRed">*</text><text>简介</text></view>
			<view class="font14">
				<textarea class="font14" v-model.trim="jobIntro" placeholder="简介(50字符内)" maxlength="50" placeholder-class="font14" cols="30" rows="10"></textarea>
			</view>
		</view>
		<view class="jobItem">
			<view class="font14 flex alignCenter"><text class="colorRed">*</text><text>证件证明</text></view>
			<view class="font14 upload">
				<view class="flex alignCenter">
					<uni-singleimg :fileUrl="fileUrl" v-if="fileUrl" @delPic="delPic"></uni-singleimg>
					<view class="bold uploadCommon colorccc" @click="uploadFileClick">+</view>
				</view>
				<view class="color999 normalTip">机构需上传营业执照和组织机构代码；职场人士上传工作证</view>
				<view class="colorMain importantTip">认证后会获得标识别，更容易得到信任喔！</view>
			</view>
		</view>
		<view class="fixedBottomBtn" v-if="!showYear" @click="submitClick">确定</view>
		<!-- 选择年份 -->
		<uni-yearpicker v-if="showYear" :showYear="showYear" @cancel="cancel" @sureYear="sureYear"></uni-yearpicker>
	</view>
</template>

<script>
	import { addJob,delJob,editJob,jobDetail } from "@/api/mine.js"
	import { uploadFile,chooseImg} from "@/utils/common.js"
	import uniYearpicker from "@/settingPages/pages/components/uni-yearpicker/uni-yearpicker.vue"
	export default {
		components:{
			uniYearpicker
		},
		data() {
			return {
				startYear:'',
				endYear:'',
				companyName:'',
				jobTitle:'',
				fileUrl:'',
				jobIntro:'',
				showYear:false,
				type:'',
				editId:''
			}
		},
		onLoad(option) {
			this.editId=option.id?option.id:''
			if(this.editId){
				this.getDetail()
			}
		},
		methods: {
			// 选择年份
			chooseYear(type){
				console.log('点击',type)
				this.type=type
				this.showYear=true
			},
			// 选择上传图片
			uploadFileClick(){
				chooseImg(1).then((file)=>{
					uploadFile(file).then((successFile)=>{
						console.log('file',file,successFile)
						this.fileUrl=successFile.url
					}).catch((err)=>{
						console.log('err',err)
					})
				})
			},
			// 删除图片
			delPic(){
				this.fileUrl=''
			},
			cancel(){
				this.showYear=false
			},
			sureYear(year){
				if(this.type=='start'){
					this.startYear=year
				}else{
					this.endYear=year
				}
				this.showYear=false
			},
			getDetail(){
				jobDetail({id:this.editId}).then((res)=>{
					if(res.code==100000){
						this.startYear=res.data.startTime
						this.endYear=res.data.endTime
						this.companyName=res.data.companyName
						this.jobTitle=res.data.position
						this.fileUrl=res.data.picUrl
						this.jobIntro=res.data.introduction
					}
				})
			},
			submitClick(){
				if(!this.startYear){
					uni.showToast({
						icon:'none',
						title:'请选择开始年份'
					})
					return
				}else if(!this.endYear){
					uni.showToast({
						icon:'none',
						title:'请选择结束年份'
					})
					return
				}else if(!this.companyName){
					uni.showToast({
						icon:'none',
						title:'请输入公司名称'
					})
					return
				}else if(!this.jobTitle){
					uni.showToast({
						icon:'none',
						title:'请输入职位'
					})
					return
				}else if(!this.jobIntro){
					uni.showToast({
						icon:'none',
						title:'请输入简介'
					})
					return
				}else if(!this.fileUrl){
					uni.showToast({
						icon:'none',
						title:'请上传相关证件'
					})
					return
				}else if(this.endYear<this.startYear){
					uni.showToast({
						icon:'none',
						title:'结束年份不能小于开始年份'
					})
					return
				}
				uni.showLoading({
					title:'提交中',
					mask:true
				})
				let param={
					startTime:this.startYear,
					endTime:this.endYear,
					companyName:this.companyName,
					position:this.jobTitle,
					introduction:this.jobIntro,
					picUrl:this.fileUrl
				}
				if(this.editId){
					param.id=this.editId
					editJob(param).then((res)=>{
						uni.hideLoading()
						if(res.code==100000){
							uni.navigateBack()
						}
					}).catch(()=>{uni.hideLoading()})
				}else{
					addJob(param).then((res)=>{
						uni.hideLoading()
						if(res.code==100000){
							uni.navigateBack()
						}
					}).catch(()=>{uni.hideLoading()})
				}
			}
		}
	}
</script>

<style lang="scss">
@import "@/static/public.scss";
page{
	background: $pageBgColor;
}
</style>
<style lang="scss" scoped>
@import "@/static/public.scss";
.job{
	padding: 30rpx 30rpx 120rpx;
}
.jobItem{
	background: #fff;
	border-radius: 10rpx;
	padding: 30rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	.upload{
		margin:30rpx 0 0;
	}
	.title{
		flex-shrink: 0;
	}
	input{
		width:100%;
		text-align: right;
	}
	textarea{
		padding: 15rpx;
		width: 100%;
		box-sizing: border-box;
		background:$pageBgColor;
		margin:20rpx 0 0;
		border-radius: 10rpx;
	}
}
</style>
